<template>

<!--  <el-scrollbar height="750px">-->
  <div class="parson">
    <!--    头部盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <!--      头像-->
        <div class="icons">
          <el-avatar :size="50" :src="imgdata.url" />
<!--          <imgUpFile :imgdata="imgdata"></imgUpFile>-->
        </div>
        <div class="icone">
          <span v-if="dataFrom!=1">{{ dataFrom.recordName }}({{ dataFrom.staffRecord.department.departmentName }})</span>
          <!--          性别图片-->
          <i class="iconfont icon-nan3"></i>
        </div>
      </div>

    </el-row>
    <!--    标签页-->
    <el-scrollbar max-height="608px">
      <div style="width: 100%">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!--        基本信息最大盒子-->
          <el-tab-pane class="basic-information" label="基本信息" name="first">
            <!--          左边最大的盒子-->
            <div class="left-all">
              <!--              大图片-->
              <div class="big-img">
<!--                <img class="img1" src="./src/assets/img/t.jpg">-->
                <imgUpFile :imgdata="imgdata"></imgUpFile>
              </div>
              <!--              三个信息按钮z最大的盒子-->
              <div class="information">
                <!--                  小盒子-->
                <div class="small-box">
                  <div class="characters" title="信息发送">
                    <i class="iconfont icon-duanxin3"></i>
                  </div>
                </div>
                <div class="small-box">
                  <div class="characters" title="发送邮件">
                    <i class="iconfont icon-youjian_o"></i>
                  </div>
                </div>
                <div class="small-box">
                  <div class="characters" title="新建日程">
                    <i class="iconfont icon-richengbiao"></i>
                  </div>
                </div>
              </div>
              <div class="date-all">
                <div class="style-size">
                  <div class="all-stlye">账号类型：</div>
                  <div class="all-size">主账号</div>
                </div>
                <div class="style-size">
                  <div class="all-stlye">直接上级：</div>
                  <div class="all-size">陈冬冬</div>
                </div>
                <div class="style-size">
                  <div class="all-stlye">下属：</div>
                  <div class="all-size">10</div>
                </div>
                <div class="style-size">
                  <div class="all-stlye">状态：</div>
                  <div class="all-size">正式</div>
                </div>
                <div class="style-size">
                  <div class="all-stlye">最后登录日期：</div>
                  <div class="all-size">2022-10-13</div>
                </div>
              </div>


            </div>
            <!--              右边最大的盒子-->
            <div class="right-all">
              <!--             右边上面的盒子-->
              <div class="right-top">
                <div class="all-map">
                  <!--                  流程大盒子-->
                  <div class="flow-all">
                    <!--                    流程图片-->
                    <i class="iconfont icon-chakanliucheng"></i>
                    <!--                    流程文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      流程文字盒子-->
                      <div class="wordage">流程</div>
                      <!--                      流程数字文字-->
                      <div class="nimbers">317</div>
                    </div>

                  </div>
                  <!--                  文档大盒子-->
                  <div class="flow-all">
                    <!--                    文档图片-->
                    <i class="iconfont icon-wendang1"></i>
                    <!--                    文档文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      流程文字盒子-->
                      <div class="wordage">文档</div>
                      <!--                      文档数字文字-->
                      <div class="nimbers1">1984</div>
                    </div>
                  </div>
                  <div class="flow-all">
                    <!--                    客户图片-->
                    <i class="iconfont icon-caidanlan-kehu-kehulianxiren"></i>
                    <!--                    客户文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      客户文字盒子-->
                      <div class="wordage">客户</div>
                      <!--                      客户数字文字-->
                      <div class="nimbers2">10</div>
                    </div>
                  </div>
                  <div class="flow-all">
                    <!--                    项目图片-->
                    <i class="iconfont icon-xiangmu"></i>
                    <!--                    项目文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      项目文字盒子-->
                      <div class="wordage">项目</div>
                      <!--                      项目数字文字-->
                      <div class="nimbers3">1</div>
                    </div>
                  </div>
                  <div class="flow-all">
                    <!--                    资产图片-->
                    <i class="iconfont icon-licai"></i>
                    <!--                    资产文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      资产文字盒子-->
                      <div class="wordage">资产</div>
                      <!--                      资产数字文字-->
                      <div class="nimbers4">1</div>
                    </div>
                  </div>
                </div>
                <!--两张图片、文字、数字-->
                <div class="bottom-map">
                  <div class="flow-all">
                    <!--                    协作图片-->
                    <i class="iconfont icon-cooperation"></i>
                    <!--                    协作文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      协作文字盒子-->
                      <div class="wordage">协作</div>
                      <!--                      协作数字文字-->
                      <div class="nimbers5">6</div>
                    </div>
                  </div>
                  <div class="flow-all">
                    <!--                    微博图片-->
                    <i class="iconfont icon-weibo1"></i>
                    <!--                    微博文字、数字大盒子-->
                    <div class="all-wordage">
                      <!--                      微博文字盒子-->
                      <div class="wordage">微博</div>
                      <!--                      微博数字文字-->
                      <div class="nimbers6">0</div>
                    </div>
                  </div>
                </div>
              </div>

<!--              右边下面-----折叠面板-->
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="基本信息" name="1" >
                  <div class="right-button">

                  <div>
                      <!--               右下方第一个表格-->
                      <div class="all-table">
                        <!--                 左边表格最大盒子-->
                        <div class="right-table">
                          <!--                 表格左边文字大盒子-->
                          <div class="line-app">
                            <!--                   表格文字小盒子-->
                            <div class="line-characters">
                              <div class="across-all">岗位：</div>
                              <div class="simple-input">采购主管</div>
                            </div>
                            <div class="line-characters">
                              <div class="across-all">职称：</div>
                              <div class="simple-input"></div>
                            </div>
                            <div class="line-characters">
                              <div class="across-all">职责描述：</div>
                              <div class="simple-input"></div>
                            </div>
                            <div class="line-characters">
                              <div class="across-all">办公地点：</div>
                              <div class="simple-input">23456</div>
                            </div>
                            <div class="line-characters">
                              <div class="across-all">爱好：</div>
                              <div class="simple-input"></div>
                            </div>
                          </div>
                          <!--                 右边表格最大盒子-->
                          <div class="right-big">
                            <!--                 表格左边文字大盒子-->
                            <div class="line-app">
                              <!--                   表格文字小盒子-->
                              <div class="line-characters">
                                <div class="across-all">职务：</div>
                                <div class="simple-input">采购主管</div>
                              </div>
                              <div class="line-characters">
                                <div class="across-all">职级：</div>
                                <div class="simple-input">2</div>
                              </div>
                              <div class="line-characters">
                                <div class="across-all">系统语言：</div>
                                <div class="simple-input">简体中文</div>
                              </div>
                              <div class="line-characters">
                                <div class="across-all">有何专长：</div>
                                <div class="simple-input"></div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                  </div>
                </el-collapse-item>
<!--                右边下面的表格-->
                <el-collapse-item title="岗位信息" name="2" >
                  <div class="right-button">
                    <div>
                      <div class="right-button1">
                        <!--                   右下方第一个表格-->
                        <div class="all-table">
                          <!--                 左边表格最大盒子-->
                          <div class="right-table">
                            <!--                 表格左边文字大盒子-->
                            <div class="line-app">
                              <!--                   表格文字小盒子-->
                              <div class="line-characters">
                                <div class="across-all">移动电话：</div>
                                <div class="simple-input">185-9544-5621</div>
                              </div>
                              <div class="line-characters">
                                <div class="across-all">其他电话：</div>
                                <div class="simple-input"></div>
                              </div>
                              <div class="line-characters">
                                <div class="across-all">电子邮件：</div>
                                <div class="simple-input">123456@qq.com</div>
                              </div>
                            </div>
                            <!--                 右边表格最大盒子-->
                            <div class="right-big">
                              <!--                 表格左边文字大盒子-->
                              <div class="line-app">
                                <!--                   表格文字小盒子-->
                                <div class="line-characters">
                                  <div class="across-all">办公室电话：</div>
                                  <div class="simple-input"></div>
                                </div>
                                <div class="line-characters">
                                  <div class="across-all">传真：</div>
                                  <div class="simple-input"></div>
                                </div>
                                <div class="line-characters">
                                  <div class="across-all">办公室：</div>
                                  <div class="simple-input"></div>
                                </div>
                              </div>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>

              </el-collapse>

              <!--             右边下面最大盒子-->
              <el-dialog v-model="formJobPost" title="用人需求申请单" style="text-align: center">
                <el-form :model="form" label-width="120px">
                  <el-form-item label="发布部门">
                    <el-select v-model="form.region" placeholder="请选择">
                      <el-option label="人事" value="人事" />
                      <el-option label="财务" value="财务" />
                      <el-option label="后勤" value="后勤" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="岗位职称">
                    <el-select v-model="form.name" placeholder="请选择">
                      <el-option label="xxx" value="xxx" />
                      <el-option label="xxx" value="xxx" />
                      <el-option label="xxx" value="xxx" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="需求人数">
                    <el-input v-model="form.resource" />
                  </el-form-item>
                  <el-form-item label="发布时间">
                    <el-col :span="11">
                      <el-date-picker
                          v-model="form.date1"
                          type="date"
                          style="width: 100%"
                      />
                    </el-col>
                  </el-form-item>

                  <el-form-item label="岗位需求">
                    <el-input v-model="form.desc" type="textarea" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </div>

          </el-tab-pane>


        </el-tabs>
      </div>
    </el-scrollbar>
  </div>

<!--    </el-scrollbar>-->
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, toRefs} from "vue";
import { Search } from '@element-plus/icons-vue'
import axios from "axios";
import imgUpFile  from "./imgUpFile.vue";
import {useStore} from "vuex";
const imgdata= reactive(
    {url:""}
)
const store = useStore()
console.log(store.state.userData.data.userLogin.sysUser.userPosition,"st")
onMounted(()=>{
  const id =store.state.userData.data.userLogin.sysUser.userPosition
  axios.get(`http://localhost:1688/recordDubbo/userRecordDubbo/${id}`).then(data=>{
    dataFrom.value=data.data.data;
    console.log(dataFrom.value)
  })

})

const dataFrom = ref("1");
const activeNames = ref(['1','2'])

const handleChange = (val: string[]) => {
  console.log(val)
}
const d = reactive({
  s:true,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  // 点击编辑按钮数据
  compile:false,

});


// 头像
const circleUrl = ref('../src/assets/touxiang.jpg')

// 默认点开个人中心进入基本信息
const activeName = ref('first')

// 点开待办事宜默认进入全部页面
const activeNameSmall = ref('first')

// 点击编辑按钮数据
const {total,pageNo,pageSize,compile} = toRefs(d);

</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");

*{
  margin: 0px;
  padding: 0px;
}
/*最大盒子*/
.parson{
  background-color: #FFFFFF;
}

/*头部盒子*/
.search{
  border-bottom: 1px solid silver;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F9F9F9;
}
/*头像*/
.icons{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding-left: 20px;
  text-align: center;
  margin: auto;

}
/*头部文字和男图片盒子*/
.icone{
  padding-left: 10px;
  font-size: 16px;

}
/*头部男图片*/
.icon-nan3{
  color:#21BDA8 ;
  width: 40px;
  height: 40px;
}
/*编辑按钮*/
.butt{
  width: 60px;
  height: 30px;
  background-color: #2DB7F5;
  color: white;
  border-radius: 3px;
  display: flex;
  margin-right: 20px;
  font-size: 14px;
}
/*标签页*/
.demo-tabs{
  padding-left: 24px;
  border: 1px solid silver;
}
/*下面基本信息最大盒子*/
.basic-information{
  display: flex;
}
/*左边最大盒子*/
.left-all{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 22px 30px 0px 30px;
}
/*大图片*/
.big-img{
  /*border: 1px solid black;*/
  width: 148px;
  margin-right: 30px;
}
/*!*三个图片大盒子*!*/
.information{
  display: flex;
  padding-top: 10px;
}
/*三个图片分开的小盒子*/
.small-box{
  width: 56px;
}
/*信息发送图片*/
.icon-duanxin3{
  color: #2DB7F5;
  border: 1px solid silver;
  font-size: 35px;
  border-radius:30px;
}
.icon-duanxin3:hover{
  color: white;
  background-color: #2DB7F5;
}
/*发送邮件图片*/
.icon-youjian_o{
  background-color: white;
  border: 1px solid silver;
  color: #2DB7F5;
  font-size: 35px;
  border-radius:30px;
}
.icon-youjian_o:hover{
  color: white;
  background-color: #2DB7F5;
}
/*新建日程图片*/
.icon-richengbiao{
  background-color: white;
  color: #2DB7F5;
  font-size: 35px;
  border-radius:30px;
  border: 1px solid silver;
}
.icon-richengbiao:hover{
  color: white;
  background-color: #2DB7F5;
}
/*左边下方文字信息大盒子*/
.date-all{
  margin-top: 10px ;
}
.style-size{
  display: flex;
  width: 210px;
}
.all-stlye{
  width: 115px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
}
.all-size{
  display: flex;
  line-height: 40px;
  align-content: space-around;
  flex-wrap: wrap;
  flex-direction: column;
}
/*右边最大的盒子*/
.right-all{
  border-left: 1px solid silver;
  width: 80%;
}

/*右边上面的盒子*/
.right-top{
  height: 220px;
}
/*六张图片、文字、数字盒子*/
.all-map{
  display: flex;
  padding: 50px 50px 0px 40px;
}
/*流程大盒子*/
.flow-all{
  display: flex;
  width: 150px;
  height: 48px;
  margin-left:40px ;
}
/*流程图片*/
.icon-chakanliucheng{
  font-size: 46px;
  color: white;
  background-color: dodgerblue;
  border-radius:37px;
}
/*流程文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*流程文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*流程数字*/
.nimbers{
  font-size: 25px;
  color: #1AB4F7;
}
/*文档图片*/
.icon-wendang1{
  font-size: 46px;
  color: white;
  background-color: #2CC1AF;
  border-radius:37px;
}
/*文档文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*文档文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*文档数字*/
.nimbers1{
  font-size: 25px;
  color: #2CC1AF;
}
/*客户图片*/
.icon-caidanlan-kehu-kehulianxiren{
  font-size: 46px;
  color: white;
  background-color: #548EE5;
  border-radius:37px;
}
/*客户文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*客户文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*客户数字*/
.nimbers2{
  font-size: 25px;
  color: #548EE5;
}
/*项目图片*/
.icon-xiangmu{
  font-size: 46px;
  color: white;
  background-color: #28CF87;
  border-radius:37px;
}
/*项目文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*项目文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*项目数字*/
.nimbers3{
  font-size: 25px;
  color: #28CF87;
}
/*资产图片*/
.icon-licai{
  font-size: 46px;
  color: white;
  background-color: #F7AF40;
  border-radius:37px;
}
/*资产文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*资产文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*资产数字*/
.nimbers4{
  font-size: 25px;
  color: #F7AF40;
}
/*两张图片、文字、数字*/
.bottom-map{
  display: flex;
  padding: 50px 50px 0px 40px;
}
/*协作图片*/
.icon-cooperation{
  font-size: 46px;
  color: white;
  background-color: #5F7DEE;
  border-radius:37px;
}
/*协作文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*协作文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*协作数字*/
.nimbers5{
  font-size: 25px;
  color: #5F7DEE;
}
/*微博图片*/
.icon-weibo1{
  font-size: 46px;
  color: white;
  background-color: #FB6F46;
  border-radius:37px;
}
/*微博文字、数字盒子*/
.all-wordage{
  padding: 10px 0px 0px 20px;
}
/*微博文字*/
.wordage{
  font-size: 14px;
  color: #000000;
}
/*微博数字*/
.nimbers6{
  font-size: 25px;
  color: #FB6F46;
}


/*左边表格最大盒子*/
.right-table{
  display: flex;
}
/*表格左边文字大盒子*/
.line-app{
  width: 400px;
  font-size: 14px;
  color: #000000;
  margin: 20px 20px 25px 20px;
  line-height: 20px;

}
/*表格文字小盒子*/
.line-characters{
  padding-bottom: 10px;
  display: flex;
}

/*文字盒子*/
.across-all{
  width: 120px;
  font-size: 14px;
  color: #000000;
}
/*输入框*/
.simple-input{
  height: 38px;
  width: 100%;
  border-bottom: 1px solid silver;
}
/*左边表格最大盒子*/
.right-big{
  width: 500px;
  margin-left: 100px;
}



</style>